<template>
  <div class="stories-item">
    <div class="date" v-if="storiesData.date<nowTime">
      {{storiesData.date | strFormat}}
      <span class="line"></span>
    </div>
    <div class="item" v-for="(e,i) in storiesData.stories" :key="i" @click="postStoryID(e.id)">
      <div class="stories-info">
        <div class="stories-title">{{e.title}}</div>
        <div class="hint">{{e.hint}}</div>
      </div>
      <div class="stories-img">
        <img :src="e.images" width="100%" height="100%" alt />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "stories-item",
  data() {
    return {
      nowTime: 0
    };
  },
  methods: {
    getBeforeDate(date) {
      let data = date;
      let d = new Date();
      let year = d.getFullYear();
      let mon = d.getMonth() + 1;
      let day = d.getDate();
      if (day <= data) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() - data);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      let s =
        year + (mon < 10 ? "0" + mon : mon) + (day < 10 ? "0" + day : day);
      this.nowTime = s;
    },
    postStoryID(storyID) {
      this.$router.push({
        name: "Story",
        params: {
          storyid: storyID
        }
      });
    }
  },
  created() {
    this.getBeforeDate(0);
  },
  props: {
    storiesData: {
      type: Object,
      default() {
        return;
      }
    }
  }
};
</script>
<style lang="less">
.date {
  color: darkgray;
  position: relative;
  letter-spacing: 1px;
  margin-left: 10px;

  .line {
    top: 50%;
    right: 0;
    position: absolute;
    width: 85%;
    border-bottom: 1px solid rgba(159, 157, 157, 0.3);
  }
}
.item {
  display: flex;
  height: 80px;
  padding: 20px 0;
}
.stories-info {
  margin-left: 10px;
  width: 70vw;
  .stories-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .hint {
    color: rgba(105, 106, 108, 0.7);
  }
}
.stories-img {
  width: 70px;
  height: 70px;
  margin-left: auto;
  margin-right: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.dark{
  background:rgb(26, 26, 26);
}
</style>